import React, { memo, useEffect } from "react";

import XJHThemeHeaderRCM from "@/components/theme-header-rcm";
import { RecommendRankingWrapper } from "./style";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { getRankingAction } from "../../store/actionCreators";
import XJHTopRanking from "@/components/top-ranking";

const XJHRecommendRanking = memo(() => {
  const { upRanking, newRanking, originRanking } = useSelector(
    (state) => ({
      upRanking: state.getIn(["recommend", "upRanking"]),
      newRanking: state.getIn(["recommend", "newRanking"]),
      originRanking: state.getIn(["recommend", "originRanking"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getRankingAction(0));
    dispatch(getRankingAction(2));
    dispatch(getRankingAction(3));
  }, [dispatch]);
  return (
    <RecommendRankingWrapper>
      <XJHThemeHeaderRCM title="推荐排行"></XJHThemeHeaderRCM>
      <div className="tops">
        <XJHTopRanking info={upRanking}></XJHTopRanking>
        <XJHTopRanking info={newRanking}></XJHTopRanking>
        <XJHTopRanking info={originRanking}></XJHTopRanking>
      </div>
    </RecommendRankingWrapper>
  );
});

export default XJHRecommendRanking;
